<template>
  <div class='question-info'>
    
    <div style='margin-left: 20px;'>
      <h2>{{ title }}</h2>
      <a-space :size='10'>
        <a-tag v-for='(tag, index) in tags'
               :key='index'
               :bordered='true'
               color='blue'>{{ tag }}</a-tag>
      </a-space>
    </div>
    
    <!--视图模式-->
    <mavon-editor
      v-model='docTxt'
      :subfield='false'
      :editable='false'
      class='my-editor'
      :ishljs='true'
      box-shadow-style='0 0 0 0 rgba(0,0,0,0)'
      default-open='preview'
      :toolbars-flag='false'
    />
  
  
  </div>
</template>

<script>
// 新增：导入组件
import mavonEditor from 'mavon-editor'

// 新增：导入样式
import 'mavon-editor/dist/css/index.css'

export default {
  // 新增：注册组件
  components: {
    'mavonEditor': mavonEditor.mavonEditor
  },
  props: {
    editorHeight:{
      required: false,
      default: '',
      type: String
    },
    title: {
      required: false,
      default: '',
      type: String
    },
    tags: {
      required: false,
      default: () => [],
      type: Array
    },
    markdownContent: {
      required: false,
      default: '',
      type: String
    }
  },
  name: 'QuestionInfo',
  data() {
    return {
      docTxt: this.markdownContent
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style scoped lang='less'>
.my-editor {
  z-index: 0;
}

.question-info {
  background-color: #fbfbfb;
  padding: 10px 5px 5px;
  border-radius: 2%;
}
</style>